<template>
  <div class="process">
    <div>
      <div class="process_title">
        {{progress.entname}}
      </div>
      <div class="process_info">
        <p>业务类型：{{progress.opertype | dict('CD01')}}</p>
        <p>核准机关：{{progress.regorg | dict('CA11')}}</p>
        <p>业务状态：
          <span>{{progress.state | dict('DFCP09')}}</span>
        </p>
        <p v-if="progress.state !== '02' && progress.state !== '03'">审批意见：{{progress.apprmsg}}</p>
      </div>
    </div>
    <div class="process_text" v-if="progress.state==='02'">
      <Icon type="android-attach"></Icon>
      <span style="color: #00b3ff;font-weight: 600">
        业务填报完成，您需要通知以下责任方完成实名认证、业务确认（在线签字），
        所有所需签字方均完成实名认证及业务确认（在线签字）后，业务申请会提交工商机关！
      </span>
    </div>
    <div class="process_text" v-if="progress.state==='08'">
      <Icon type="android-attach"></Icon>
      <span style="color: #00b3ff;font-weight: 600">
      您的申请已经被工商机关核准，请到核准机关领取营业执照及公章（如选择免费刻章）
      </span>
    </div>
    <div class="process_state" v-for="(item,index) in confirm" :key="index">
        <div class="top">
          <span class="left">{{item.name}}</span>
          <span class="right">{{item.title}}</span>
        </div>
        <div class="bottom">
          <span class="left" :class="item.identityState==='0'?'nosure':''">{{item.identityState === '1'?'已认证':'未认证'}}</span>
          <span v-if="item.isNeedConfirm === '1'" class="right" :class="item.confirmState==='2'?'':'nosure'">{{item.confirmState === '2'?'已签名':'未签名'}}</span>
          <span v-else class="right gray" >无需签名</span>
        </div>
    </div>
    <div class="process_bottom">
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyFooter from '../../components/MyFooter.vue'
  import request from '../../utils/request'
  export default {
    data() {
      return {
        progress: {},
        confirm: []
      }
    },
    methods: {
      queryProgress() {
        request.get('/interface/business/detail.do', {gid: this.$route.params.gid})
        .then(response => {
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
          // 成功逻辑
          this.progress = response.data.data.business
          if (this.progress.state === '02') {
            this.confirm = response.data.data.confirm
          }
        })
      }
    },
    mounted() {
      this.queryProgress()
    },
    components: {
      MyFooter
    }
  }

</script>

<style lang="scss" scoped>
  .process {
    position: relative;
    min-height: 100%;
    padding-bottom: 2.25rem;
    background: #f3f3f3;
    >div {
      background: #fff;
      padding: 0.54rem;
    }
    &_title {
      color: #00b3ff;
      overflow: hidden;
      white-space: nowrap;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 0.22rem;
      margin-bottom: 0.32rem;
      font-weight: 700;
    }
    &_text {
      padding: 1rem .5rem;
      border: 1px solid #000;
      border-radius: 5px;
      i {
        font-size: 1rem;
        margin-right: 0.18rem;
      }
    }
    &_state {
      overflow: hidden;
      padding: 0 .54rem !important;
      .top{
        height: 1.5rem;
        line-height: 1.5rem;
        color: ghostwhite;
        background: #2b85e4;
        .left{
          float: left;
          margin-left: 1rem;
        }
        .right{
          float: right;
          margin-right: 1rem;
        }
        .gray{
          color: gray;
        }
      }
      .bottom{
        padding-top: 0px;
        height: 2rem;
        span {
          display: block;
          height: 1rem;
          padding: .1rem 1rem;
          color: green;
          border: 1px solid green;
          border-radius: 20px;
          float: left;
          margin: .4rem 0 0 1.5rem;
        }
        .nosure {
          color: #ff0000;
          border: 1px solid #ff0000;
        }
      }
    }
    &_info {
      font-size: 0.5rem;
      p {
        line-height: 1.75;
      }
      span {
        color: #cf4553;
      }
    }
    &_person {
      padding: 0.32rem 0;
      button {
        margin-right: 0.32rem;
      }
      span {
        font-size: 0.57rem;
        margin-right: 0.16rem;
      }
      em {
        font-size: 0.43rem;
      }
    }
    &_pass {
      color: #367404;
      border: 1px solid#367404;
      background: #e6eede;
    }
    &_nosubmit {
      color: #cf4553;
      border: 1px solid#cf4553;
      background: #f1dcde;
    }
    &_bottom {
      position: absolute;
      bottom: 0;
      width: 100%;
      background: #f3f3f3 !important;
    }
  }

</style>
